<template>
<div class="dialog-ExampleItemDialog">
	<el-dialog
		:title="dialogTitle"
		v-model="dialogExampleItemVisible"
		width="600px"
		:before-close="hideDialog">
		<el-form :model="formData" class="dialog-form-box" label-width="80px" :inline="true" ref='exampleItemFormRef' :rules='validateRules'>
			<el-form-item label="姓名" prop="username">
				<el-input v-model="formData.username" placeholder="请输入姓名" :disabled='isReadonly'></el-input>
			</el-form-item>
			<el-form-item label="性别" prop='sex'>
				<el-select v-model="formData.sex" placeholder="请选择性别" :disabled='isReadonly'>
					<el-option v-for="data in sexDic" :value="data.value" :key="data.value" :label='data.label'>{{ data.label }}</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="日期" prop='date'>
				<el-date-picker type="date" :editable="false" placeholder="请选择日期" style='width:100%;' v-model="formData.date" :disabled='isReadonly'></el-date-picker>
			</el-form-item>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button type="primary" @click="hideDialog" v-if='isReadonly'>关 闭</el-button>
				<el-button @click="hideDialog" v-if='!isReadonly'>取 消</el-button>
				<el-button type="primary" @click="clickSubmit" v-if='!isReadonly'>确定</el-button>
			</span>
		</template>
	</el-dialog>
</div>
</template>

<script>
import { ref, reactive, toRefs, getCurrentInstance, unref } from "vue";
import { get } from "@/common/service.js";
import { ElMessage } from 'element-plus'

export default {
	name: 'ExampleItemDialog',
	props: {
		// 是否只读模式
		isReadonly: {
			type: Boolean,
			default : function () {
				return false;
			}
		},
		// 是否是编辑模式
		isEdit: {
			type: Boolean,
			default : function () {
				return false;
			}
		},
		// 非新增模式下数据
		itemData: {
			type: Object,
			default : function () {
				return {};
			}
		},
	},
	setup (props, context) {
		const { proxy } = getCurrentInstance();
		const exampleItemFormRef = ref();
		
		// 主数据
		const mainData = reactive({
			// 弹窗显隐
			dialogExampleItemVisible: false,
			// 表单数据
			formData: {
				username: '',
				sex: '',
				date: '',
			},
			// 表单校验规则
			validateRules: {
				username: [
					{ required: true, message: '请输入姓名', trigger: 'blur' },
				],
				sex: [
					{ required: true, message: '请选择性别', trigger: 'change' },
				],
				date: [
					{ required: true, message: '请选择日期', trigger: 'change' },
				],
			},
			// 下拉列表-性别
            sexDic: [{
                value: '1',
                label: '男'
            },{
                value: '2',
                label: '女'
            }],
		});
		// 清空表单
		const resetForm = () => {
			const form = unref(exampleItemFormRef);
			if(form) {
				form.resetFields();
			}
		};
		// 打开弹窗
		const openDialog = (itemData) => {
			resetForm();
			if(itemData && itemData.primaryId) {//非新增模式
				mainData.formData = JSON.parse(JSON.stringify(itemData));
			}else {//新增

			}
			mainData.dialogExampleItemVisible = true;
		};
		// 关闭弹窗
		const hideDialog = () => {
			mainData.dialogExampleItemVisible = false;
			context.emit("hideDialog");
		};
		// 提交-点击
		const clickSubmit = async () => {
			const form = unref(exampleItemFormRef);
			if (!form) return
			try {
				await form.validate();
				let params = JSON.parse(JSON.stringify(mainData.formData));
				sendSubmit(params);
			} catch (error) {
				console.log(error);
			} 
			
		};
		// 提交-发送
		const sendSubmit = async (data) => {
			let res = await get(proxy.$Api('queryExampleList'), data);
            if (res) {
                ElMessage({
                    type: 'success',
                    message: '操作成功!'
                });
                hideDialog();
            }else {
                ElMessage({
                    type: 'error',
                    message: '删除失败!'
                });
            }
		};
		return {
			openDialog,
			hideDialog,
			clickSubmit,

			exampleItemFormRef,

			...toRefs(mainData),
		}
	},
	methods: {
	},
	computed: {
		// 弹窗标题
		dialogTitle () {
			if(this.isReadonly) {
				return '详情';
			}
			if(this.isEdit) {
				return '编辑';
			}

			return '新增';
		},
	},
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.dialog-form-box .el-form-item{ width: 48%; }
.dialog-form-box /deep/ .el-form-item__content{ width: 180px; }
</style>
